<template>
  <el-tabs v-model="activeName" type="card" class="demo-tabs">
    <el-tab-pane label="设备列表" name="first">
      <el-input style="width: 96%" placeholder="请输入" v-model="filterText" @input="filterChange">
        <template #prefix>
          <el-icon>
            <search/>
          </el-icon>
        </template>
      </el-input>
      <div style="overflow-y: scroll" :style="{ height: leftheight + 'px' }">
        <el-tree style="width: 240px" ref="popularTree" :data="terrList" node-key="id" :props="defaultProps"
                 highlight-current :default-expanded-keys="defaultExpandedKeys" :filter-node-method="filterNode"
                 @node-click="handleNodeClick">
          <template #default="{ node }">
            <p v-if="node.data.dataType === 'camera'" class="flex-center">
              <el-image v-if="node.data.cameraType === 'ball'" class="icon-img" src="/tree/ball.png"></el-image>
              <el-image v-else-if="node.data.cameraType === 'gun'" class="icon-img" src="/tree/gun.png"></el-image>
              <span v-if="node.data.isOnline === 'f'" style="color: #c9c8c8">&nbsp;{{ node.label }}&nbsp;</span>
              <span v-else style="color: #2d6cf3">&nbsp;{{ node.label }}&nbsp;</span>
              <el-image v-if="node.data.isAlarm === 'f'" class="icon-img" src="/tree/f.png"></el-image>
              <el-image v-else-if="node.data.isAlarm === 't'" class="icon-img" src="/tree/t.png"></el-image>
            </p>
            <p v-else-if="node.data.dataType === 'nvr'" class="flex-center">
              <el-icon>
                <CreditCard/>
              </el-icon>
              <span>{{ node.label }}</span>
            </p>
            <p v-else class="flex-center">
              <span>{{ node.label }}</span>
            </p>
          </template>
        </el-tree>
      </div>
    </el-tab-pane>
    <el-tab-pane label="收藏列表" name="second">
      <CollectList @celloplayvideos="celloplayvideos" @hClick="handleNodeClick" ref="collectlist"></CollectList>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import baseService from "@/service/baseService";
import {filterTreeDatakk, removeNodesByType} from "@/utils/treedatatreating";
import CollectList from "@/views/livegbs/collectList.vue";

const defaultProps = {
  children: "children",
  label: "addr"
};

export default {
  components: {
    CollectList
  },
  props: {
    leftheight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: "first",
      filterText: "", //树过滤值
      terrList: [], //树数据
      defaultProps,
      defaultExpandedKeys: [] // 初始为空数组
    };
  },
  mounted() {
    this.getNvrTree();
  },
  methods: {
    celloplayvideos(data) {
      this.$emit("celloplayvideos", data)
    },
    getSchemeList() {
      this.$refs.collectlist.getSchemeList()
    },
    // 默认展开
    getAllKeys(nodes) {
      nodes.forEach((node) => {
        this.defaultExpandedKeys.push(node.id);
        if (node.children && node.children.length) {
          this.getAllKeys(node.children);
        }
      });
    },
    // 树搜索
    filterChange() {
      // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
      this.$refs.popularTree.filter(this.filterText);
    },
    filterNode(value, data, node) {
      if (!value) return true;
      if (!value) return true;
      let parentNode = node.parent;
      let labels = [node.label];
      let level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    },
    // 更新树数据
    getNvrTree() {
      baseService.get("/Nvr/kxnvr/getNvrTree").then((stat) => {
        console.log(stat.data)
        let terrList = removeNodesByType(stat.data, "hk-mn-zt");
        // 过滤空的硬盘录像机
        this.terrList = filterTreeDatakk(terrList)
        this.getAllKeys(this.terrList);

        let list = this.flattenTreeToList(this.terrList);
        let audinData = new Map();
        list.forEach((item) => {
          if ("camera" === item.dataType && "hk" === item.type) {
            audinData.set(item.ip, {
              ip: item.ip,
              port: item.port,
              username: item.username,
              password: item.password,
              audioIp: item.audioIp,
              id: item.id
            });
          }
        });

        this.$emit("sendAudinData", audinData)
      });
    },
    handleNodeClick(data) {
      if (data.dataType == "camera") {
        console.log(data);
        this.$emit("handePlayVideo", data)
      }
    },
    flattenTreeToList(tree) {
      const list = [];

      function traverse(nodes) {
        nodes.forEach((node) => {
          list.push(node);
          if (node.children && node.children.length > 0) {
            traverse(node.children);
          }
        });
      }

      traverse(tree);
      return list;
    }
  }
}
</script>


<style scoped>

.demo-tabs {
  width: 240px;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-img {
  width: 16px;
  height: 16px;
}
</style>
